// 支持文件
@import '../../../assets/scss/support';

page {
  background: #f4f5f7;
}

.app-container {
  height: 100vh;
  box-sizing: border-box;
}

.cart-wapper {
  padding-bottom: 250rpx;
}

.icon-warp {
  padding: 10px 10rpx 10px 10px;

  .icon-selected {
    height: 22px;
    width: 22px;
    background: url('%ASSETS_IMG%/s-selected_icon1@2x.png') no-repeat;
    background-size: contain;
  }

  .icon-selected-default {
    height: 22px;
    width: 22px;
    background: url('%ASSETS_IMG%/s-selected_bg_icon@2x.png') no-repeat;
    background-size: contain;
  }

  .icon-selected-disabled {
    height: 22px;
    width: 22px;
    background: url('%ASSETS_IMG%/s-selected_dis@2x.png') no-repeat;
    background-size: contain;
  }
}

.cart-box {
  @include flexbox(space-between,
    flex-start,
    column,
    wrap);

  .store-item {
    width: 100%;
    margin-top: 10px;
    background: #ffffff;

    .store-title {
      display: flex;
      flex-direction: row;
      align-items: center;
      font-size: $fontSizeSmall;
      font-weight: 600;
      line-height: 40px;
      height: 40px; // @include borderBottom;

      .title {
        padding-right: 90px;
        line-height: 40px;
        height: 40px;
        @include textoverflow(1);
        flex: 1;

        &.seckill {
          display: flex;

          .countdown-warp {
            margin-left: 10px;
            font-weight: normal;
            font-size: 12px;
            display: flex;
            flex-direction: row;

          }
        }
      }

      .icon-activity {
        display: inline-block;
        margin: auto 5px auto 0;
        width: 55px;
        height: 19px;
        background: url('%ASSETS_IMG%/s-cart-activity@2x.png') no-repeat 100% 100%;
        background-size: contain;
      }

      .special-status {
        color: #ff0000;
        position: absolute;
        right: 12px;
      }

      &.disabled {
        padding-left: 12px;
      }
    }

    .store-body {
      @include flexbox(flex-start,
        flex-start,
        column,
        wrap);
      background: #fff; // flex: initial;

      .goods-item {
        width: 100%;
        position: relative;
        padding: 15px 0;
        @include flexbox(space-between,
          flex-start,
          row,
          nowrap); // @include borderTop;
        border-top: 2rpx solid #e9e9e9;

        .goods-selected {
          line-height: 60px;
          height: 60px;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .goods-img {
          width: 60px;
          height: 60px;
          margin-right: 5px;
        }

        .goods-info {
          @include flexbox(flex-start,
            flex-start,
            column,
            nowrap);

          .goods-name {
            font-size: 28rpx;
            @include textoverflow(2);
            padding-right: 50px;
            line-height: 19px;

            .price-hot {
              display: inline-block;
              vertical-align: top;
              margin-right: 3px;
              margin-top: 3rpx;
              text-align: center;
              width: 40px;
              font-size: 10px;
              color: #ea1213;
              border-radius: 2px;
              border: 1px solid #ea1213;
              line-height: 14px;
              height: 14px;
            }
          }

          .goods-desc {
            @include flexbox(space-between,
              center,
              row,
              nowrap);
            color: #666666;
            margin-top: 30rpx;
            font-size: $fontSizeSmaller; // line-height: 32px;
            height: 32px;
            width: 100%;

            .goods-desc-left {
              @include flexbox(flex-start,
                flex-start,
                column,
                nowrap);

              .goodscolor {
                @include textoverflow(2)
              }
            }

            .goods-stepper {
              margin-right: 13px;

              .sub {
                background: #f6f6f6;
                border: 1px solid #f6f6f6;
                border-radius: 5px;
                height: 22px;
                line-height: 22px;
                width: 22px;
                font-size: 15px;
                font-weight: 600;
                padding: 0;
              }

              .input-warp {
                height: 22px;
                line-height: 22px;
                border: 1px solid #ececec;
                margin: 0 5px;
                border-radius: 5px;

                .input {
                  line-height: 22px;
                  height: 22px;
                  width: 44px;
                  padding: 0;
                  border: 0;
                  vertical-align: middle;
                  font-size: $fontSizeSmaller;
                  z-index: 1;
                }
              }

              .add {
                font-weight: 600;
                background: #f6f6f6;
                border: 1px solid #f6f6f6;
                border-radius: 5px;
                height: 22px;
                line-height: 22px;
                width: 22px;
                font-size: 15px;
                padding: 0;
              }
            }
          }

          .goods-price {
            @include flexbox(flex-start,
              center,
              row,
              nowrap);
            margin-top: 20rpx;
            font-size: $fontSizeSmaller;

            .price {
              // font-size: $fontSizeSmall;
              color: #d39078;
              margin-right: 15px;
            }

            .default {
              color: #333;
              font-size: 28rpx;
              font-weight: 600;
            }

            .tips {
              position: absolute;
              right: 12px;
              color: #ff0000;
            }
          }

          &.disabled {
            .goods-name {
              color: #999999 !important;
            }

            .goods-desc {
              color: #999999 !important;
            }

            .goods-price {
              .price {
                color: #999999 !important;
              }
            }
          }
        }

        .icon-del {
          position: absolute;
          right: 7px;
          top: 15px;
          height: 22px;
          width: 22px;
          background: url('%ASSETS_IMG%/s-close_icon@2x.png') no-repeat 100% 100%;
          background-size: contain;
        }
      }
    }

    &:nth-child(1) {
      margin-top: 0;
    }
  }
}

.specialName {
  font-size: 36rpx;
  color: #333333;
  font-weight: 520;
}

.price-small {
  font-size: 28rpx;
}

.show-tabbar {
  bottom: 120rpx !important;
}

.cart-submit-bar {
  @include flexbox(space-between,
    center,
    row,
    nowrap);
  position: fixed;
  bottom: 0;
  height: 45px;
  line-height: 45px;
  width: 100%;
  background: #ffffff;
  z-index: 300;

  .submit-bar {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex: 1;
    height: 45px;
    line-height: 45px;
    border-top: 1rpx solid $colorBorder;
    box-sizing: border-box;

    .allcheck {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: $fontSizeSmall;
      line-height: 45px;
    }

    .submit-bar__text {
      @include flexbox(center,
        flex-end,
        column,
        nowrap);
      height: 45px;
      padding: 0 10px;
      line-height: 45px;

      .text__price {
        font-size: 28rpx;
        display: flex;
        flex-direction: row;
        align-items: center;
        line-height: 45px;

        .price {
          padding-left: 10px;
          font-size: $fontSizeLarge;
          font-weight: 600;
          line-height: 45px;
          padding-bottom: 2rpx;
        }
      }

      .total-num {
        font-size: $fontSizeSmaller;
        color: #666;
      }
    }
  }

  .submit-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    color: #ffffff;
    font-size: 28rpx;
    font-weight: 600;
    background: $colorOrange;
    height: 100%;
    background: linear-gradient(to right, #F20508, #FF4270);
  }
}

.empty-info-warpper {
  background: #ffffff;
  min-height: 100%;
  box-sizing: border-box;

  .empty-info {
    background: #f4f5f7;
    padding-bottom: 35px;
    @include flexbox(center,
      center,
      column,
      nowrap);

    image {
      margin-top: 30px;
      width: 144px;
      height: 126px;
    }

    .cart-tips {
      // margin-top: 30px;
      font-size: 13px;
      color: #666666;
    }

    .cart-btn {
      width: 160px;
      margin-top: 20px;
      width: 120px;
      height: 34px;
      line-height: 34px;
      font-size: 15px;
      text-align: center;
      border: 2rpx solid #999999;
      border-radius: 3px;
      color: #333333;
    }
  }
}

.x-class {
  padding-bottom: 64rpx;
}

.goodscode {
  font-size: 24rpx;
  color: #666666;
}

.header-tips {
  background: #fff1e5;
  color: #ff1200;
  font-size: 15px;
  line-height: 44px;
  height: 44px;
  padding: 0 12px;
  display: flex;
  flex-direction: row;
  align-items: center;

  .icon {
    width: 21px;
    height: 21px;
    background: url('%ASSETS_IMG%/s-cart-icon@2x.png') no-repeat;
    background-size: cover;
    margin-right: 7px;
  }
}

/*小轮播*/

.small-swiper-warpper {
  background: #ffffff;
  padding-bottom: 16px;

  .special-title {
    margin: 0 12px;
    display: flex;
    align-items: center;
    height: 49px;
    line-height: 49px;

    text {
      color: #383838;
      font-size: 16px;
      font-weight: bold;
    }

    .img {
      margin-left: 5px;
      width: 138px;
      height: 18px;
      background: url('%ASSETS_IMG%/l-special-title2@2x.png') no-repeat center center;
      background-size: contain;
    }
  }
}